<template>
  <div class="page">
    <div class="head">
      <van-nav-bar title="转发" left-text="" right-text="确定(2)" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
      <van-search v-model="value" background="#3188bf" placeholder="搜索" :left-icon="require('./assets/img/icon_input_search.png')" />
      <div class="selected">
        <img v-for="(item, index) in curList" :key="index" :src="item.img" alt="" />
      </div>
    </div>
    <div class="cell-content">
      <van-divider :style="{ borderColor: '#ddd', margin: '0' }" :hairline="false" />
      <van-collapse v-model="activeNames" @change="collapseChange">
        <van-collapse-item v-for="(item, index) in listData" :key="index" :title="item.name" :name="item.id">
          <template #title>
            <div class="cell-title">{{ item.name }}</div>
          </template>
          <template #right-icon>
            <img :class="{ unfold: item.unfold }" class="cell-arrow" :src="require('./assets/img/icon_drop_down.png')" alt="" />
          </template>
          <van-collapse-item v-for="(item1, index1) in item.childs" :key="index1" :title="item1.name" :name="item1.id">
            <template #title>
              <div class="cell">
                <van-checkbox v-model="item1.checked" @change="checkboxChange($event,item1)"/>
                <img :src="item1.img" alt="" />
                <div class="text">{{ item1.name }}</div>
              </div>
            </template>
            <template #right-icon>
              <img :class="{ unfold: item1.unfold }" class="cell-arrow" :src="require('./assets/img/icon_drop_down.png')" alt="" />
            </template>
            <van-collapse-item v-for="(item2, index2) in item1.childs" :key="index2" :title="item2.name" :name="item2.id">
              <template #title>
                <div class="cell indent">
                  <van-checkbox v-model="item2.checked" @change="checkboxChange($event,item2)"/>
                  <img :src="item2.img" alt="" />
                  <div class="text">{{ item2.name }}</div>
                </div>
              </template>
              <template #right-icon>
                <img :class="{ unfold: item2.unfold }" class="cell-arrow" :src="require('./assets/img/icon_drop_down.png')" alt="" />
              </template>
            </van-collapse-item>
          </van-collapse-item>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  name: "App",
  components: {
    // HelloWorld
  },
  data() {
    return {
      listData: [
        {
          id: "0",
          name: "我的下级",
          childs: [
            { id: "00", name: "欧阳懿", img: require("./assets/img/icon_head_1.png"), checked: true },
            { id: "01", name: "欧阳蓓蓓", img: require("./assets/img/icon_head_3.png"), checked: false },
            {
              id: "02",
              name: "欧阳娜",
              img: require("./assets/img/icon_head_2.png"),
              checked: true,
              childs: [
                { id: "020", name: "嘉嘉", img: require("./assets/img/icon_head_4.png"), checked: false },
                { id: "021", name: "仓央", img: require("./assets/img/icon_head_5.png"), checked: false }
              ]
            },
            { id: "03", name: "上官", img: require("./assets/img/icon_head_6.png"), checked: false }
          ]
        },
        { id: "1", name: "我的直属上级", childs: [{ id: "10", name: "王小小", img: require("./assets/img/icon_head_7.png"), checked: false }] }
      ],
      value: "",
      activeNames: ["0", "1", "02"],
      curList: [
        { id: "00", name: "欧阳懿", img: require("./assets/img/icon_head_1.png"), checked: true },
        {
          id: "02",
          name: "欧阳娜",
          img: require("./assets/img/icon_head_2.png"),
          checked: true,
          childs: [
            { id: "020", name: "嘉嘉", img: require("./assets/img/icon_head_4.png"), checked: false },
            { id: "021", name: "仓央", img: require("./assets/img/icon_head_5.png"), checked: false }
          ]
        }
      ]
    };
  },
  created() {
    this.changeStatus(this.listData, this.activeNames);
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("确定(2)");
    },
    changeStatus(list, curlist) {
      let arr = curlist || [];
      if (list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (arr.includes(list[i].id)) {
            list[i].unfold = true;
          } else {
            list[i].unfold = false;
          }
          if (list[i].childs) {
            this.changeStatus(list[i].childs, arr);
          }
        }
      }
    },
    collapseChange(val) {
      this.changeStatus(this.listData, val);
    },
    checkboxChange(e,item){
      if(e){
        this.curList.push(item);
      }else{
        for(let i=0; i<this.curList.length; i++){
          if(item.id === this.curList[i].id){
            this.curList.splice(i);
          }
        }
      }
    }
  }
};
</script>

<style>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.cell-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}
.van-nav-bar__content {
  background-color: #3188bf;
}
.van-nav-bar__title {
  color: white;
}
.van-nav-bar__text {
  color: white;
}
.van-nav-bar .van-icon {
  color: white;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
  transform: scale(1);
  border: 0 solid #3188bf;
}
.search {
  background-color: #3188bf;
  height: 100px;
  width: 100%;
}
.van-search__content {
  background-color: #5aa0cc;
}
.van-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-field__body > input::placeholder {
  color: white;
}
.selected {
  display: flex;
  padding: 10px;
  width: 50px;
  height: 50px;
}
.selected > img {
  margin-right: 10px;
}
.cell-title {
  color: #3188bf;
  font-size: 18px;
  position: relative;
}
.cell-title::after {
  position: absolute;
  content: "";
  background: -webkit-linear-gradient(left, #3188bf, #fff);
  width: 100px;
  height: 3px;
  bottom: -10px;
  left: 0;
}
.cell-arrow {
  transform: rotate(180deg);
  width: 15px;
  height: auto;
}
.unfold {
  transform: rotate(0deg);
}
.cell {
  display: flex;
  align-items: center;
}
.cell > img {
  width: 50px;
  height: auto;
  margin: 0 10px;
}
.van-cell::after {
  display: none;
}
.van-collapse-item--border::after {
  border-bottom: 1px solid #ebedf0;
  border-top: none;
}
.van-collapse-item__wrapper>.van-collapse-item__content{
  padding:0;
}
.indent>img{
  margin-left: 50px;
}
</style>
